<template>
  <yk-in-body>
    <yk-drag-drop-box style="z-index: 99999999999999999999;">
      <div class="show-log" :class="{ 'is-min': isMin }">
        <header class="show-log__header d-flex-between-center text-color-regular">
          <div>{{ props.title }}</div>
          <el-icon class="cursor-pointer" @click="isMin = !isMin">
            <FolderAdd v-if="isMin" />
            <FolderRemove v-else />
          </el-icon>
        </header>
        <pre v-if="!isMin" class="mt-2"><slot name="default" /></pre>
      </div>
    </yk-drag-drop-box>
  </yk-in-body>
</template>

<script lang="ts" setup>
import YkInBody from '@yk/components/in-body/YkInBody.vue'
import YkDragDropBox from '@yk/components/drag-drop-box/YkDragDropBox.vue'
import { FolderAdd, FolderRemove } from '@element-plus/icons-vue'
import { withDefaults } from 'vue/dist/vue'

const props = withDefaults(defineProps<{
  title?: string,
}>(), {
  title: ''
})

const isMin = ref(false)

</script>

<style lang="scss" scoped>
.show-log {
  background: #FFFFFF;
  border-radius: 5px;
  padding: 10px;
  user-select: none;
  box-shadow: 0 2px 4px 0 #CCCCCC;
  min-width: 150px;
  &.is-min {
    overflow: hidden;
  }
  .show-log__header {}
}
</style>
